<template>
    <div class="common-card">
        <div class="top-info">
            <!-- <img :src="item.image" alt=""> -->
            <el-image class="img" :src="baseURL + item.image" :fit="fit" />
            <div class="info">
                <div class="title">{{ item.name }}</div>
                <div class="classfly label">所属类别：{{ item.category.name }}</div>
                <div class="label" v-if="role == 'student'">状态：<span :class="getStatusClass(item.datas)">{{
                    getStatusText(item.datas) }}</span>
                </div>
                <div class="fraction label" v-if="role == 'student'">得分：<span
                        :class="{ hasScore: item.datas && item.datas.score }">{{ item.datas && item.datas.score || '暂无'
                        }}</span></div>
                <div class="label memo" v-if="role == 'teacher'">描述：{{ item.memo || '暂无' }}</div>
            </div>
        </div>
        <div class="footer">
            <div class="item" v-if="role == 'student'">
                <img src="@/assets/icon_1.png" alt="">
                <div class="label">{{ formatDate(item.datas) }}</div>
            </div>
            <!-- 教师卡片占位div 使 flex space-between生效 -->
            <div v-else></div>
            <div class="btn">
                <div class="report" v-if="role == 'student'">导出</div>
                <div class="edit" @click="handleEdit">编辑</div>
                <div class="preview" @click="handlePreview" v-if="role == 'teacher'">预览</div>
                <!-- <div class="edit" @click="() => $router.push('/reportDetail')">编辑</div> -->
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineEmits, ref } from 'vue'
import dayjs from 'dayjs'
const baseURL = ref("https://from-master.jw100.com.cn");
const fit = ref("cover");
const props = defineProps({
    role: {
        type: Object,
        default: () => 'student'
    },
    item: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const emit = defineEmits(['edit'])
const handleEdit = () => {
    // 跳转到编辑页面
    emit('edit', props.item);
}
const handlePreview = () => {
    // 跳转到编辑页面
    emit('preview', props.item);
}
const formatDate = (data) => {
    if (!data) return "未知"
    return dayjs(new Date(data.updatetime * 1000)).format('YYYY-MM-DD HH:mm:ss')
}
const getStatusClass = (data) => {
    console.log(data, 'ss');
    if (!data) return "unsubmitted"
    // 有分数表示已批改
    if (data.score) {
        return 'corrected';
    }
    switch (data.submit_status) {
        // 未提交
        case 0:
            return 'unsubmitted';
        // 已提交
        case 1:
            return 'submitted';
        default:
            return 'unsubmitted';
    }
}

const getStatusText = (data) => {
    if (!data) return "未提交"
    // 有分数表示已批改
    if (data.score) {
        return '已批改';
    }
    return data.submit_status_text || '未提交'
}
</script>
<style lang="less" scoped>
.common-card {
    background: #FFFFFF;
    // box-shadow: 0px 0px 10px 0px rgba(53, 107, 216, 0.18);
    border-radius: 8px;
    border: 1px solid #FFFFFF;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 20px;
    padding-bottom: 30px;
    box-sizing: border-box;

    .top-info {
        display: flex;
        gap: 20px;
        padding-bottom: 20px;
        border-bottom: dashed #D6D6D6 1px;
        margin-bottom: 30px;
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
            display: flex;
            align-items: center;

            img {
                width: 18px;
                height: 16px;
                object-fit: scale-down;
                margin-right: 10px;
            }

            font-size: 14px;
            color: #666666;
            line-height: 16px;
        }

        .btn {
            display: flex;
            gap: 20px;

            .report,
            .preview,
            .edit {
                cursor: pointer;
                font-size: 14px;
                line-height: 36px;
                border-radius: 36px;
                width: 84px;
                text-align: center;
            }

            .report {
                background-color: #F2FCF2;
                color: #30B205;
                border: solid #A1D79D 1px;
            }

            .edit {
                color: #2D53F8;
                border: solid #9DA8D7 1px;
                background-color: #F2F3FC;
            }

            .preview {
                background: #FCF8F2;
                border-radius: 18px;
                border: 1px solid #D7A89D;
                font-family: FZLTHK--GBK1, FZLTHK--GBK1;
                font-weight: normal;
                font-size: 14px;
                color: #DB4620;
                letter-spacing: 1px;
                font-style: normal;
            }
        }
    }

    .info {
        font-size: 14px;
        flex: 1;

        .label {
            color: #666666;
            line-height: 16px;
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .memo {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            /* 控制显示行数 */
            overflow: hidden;
            /* 必须与高度计算匹配 */
            /* 行高 × 行数 */
        }

        .corrected {
            color: #E87100;
        }

        .unsubmitted {
            color: #BC2020;
        }

        .submitted {
            color: #30B205;
        }

        .fraction {
            span {
                color: #2D53F8;
            }

            .hasScore {
                color: #E87100;
                font-weight: bold;
            }
        }

        .title {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
            font-weight: bold;
            line-height: 20px;
        }
    }

    .img {
        width: 186px;
        height: 106px;
        object-fit: scale-down;
        border-radius: 8px;
    }

    /* 悬浮动画 */
    &:hover {
        transform: scale(1.01); // 缩放效果 
        // box-shadow: 0px 0px 20px 0px rgba(53, 107, 216, 0.3); // 阴影变化 
        box-shadow: 0px 0px 10px 0px rgba(53, 107, 216, 0.18);
        animation: cardHover 1.5s infinite alternate; // 渐变背景动画 
    }

    /* 大屏（>1440px）：3列展示 */
    @media (min-width: 1441px) {
        width: calc(33.33% - 14px); // 3列，每列占33.33%，减去间隔 
    }

    /* 中屏（768px~1440px）：2列展示 */
    @media (min-width: 768px) and (max-width: 1440px) {
        width: calc(50% - 10px); // 2列，每列占50%，减去间隔 
    }

    /* 小屏（≤768px）：1列展示 */
    @media (max-width: 768px) {
        width: 100%; // 单列展示 
    }
}
</style>